<template>


  <div class="app-container" style="margin-left: 200px">
    <el-container>
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            ref="menus"
            default-active="3"
            class="el-menu-vertical-demo">


            <el-menu-item index="1" @click="to('/ucenter/myinfo')">
              <i class="el-icon-location"></i>
              <span slot="title">个人编辑</span>
            </el-menu-item>

            <el-menu-item index="2" @click="to('/ucenter/editpass')" >
              <i class="el-icon-menu"></i>
              <span slot="title">修改密码</span>
            </el-menu-item>


            <el-menu-item index="3" @click="to('/ucenter/myorder')">

              <i class="el-icon-setting"></i>
              <span slot="title">我的订单</span>

            </el-menu-item>
            <el-menu-item index="4" @click="to('/ucenter/mycomment')">
              <i class="el-icon-document"></i>
              <span slot="title">我的评论</span>
            </el-menu-item>

          </el-menu>
        </el-col>
      </el-row>
      <el-main >

        <div>
          <template>
            <el-table
              :data="tableData"
              border
              style="width: 100%">
              <el-table-column prop="orderNo" label="订单号"/>
              <el-table-column prop="courseTitle" label="课程标题">
                <template slot-scope="scope">
                  <a :href="'/course/'+scope.row.courseId" target="_blank" >
                    {{scope.row.courseTitle}}
                  </a>
                </template>
              </el-table-column>
              <el-table-column prop="totalFee" label="金额"/>
              <el-table-column  label="支付类型">
                <template slot-scope="scope">
                  {{ scope.row.payType == 0 ? '免费': scope.row.payType == 1 ? '微信' : '支付宝' }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="订单状态">
                <template slot-scope="scope">
                  {{ scope.row.status === 1 ? '已支付' : '未支付'  }}
                </template>
              </el-table-column>
              <el-table-column prop="eduCreate" label="下单时间"/>

              <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                  <el-button v-if="scope.row.status==0" @click="toPay(scope.row.orderNo)" type="danger" size="small">去支付

                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              :page-count="page.pages"
              @current-change="handleCurrentChange"
              background
              layout="prev, pager, next">
            </el-pagination>
          </template>

        </div>
      </el-main>
    </el-container>

  </div>

</template>

<script>
import ordersApi from '@/api/orders'
export default {
  name: "ucenter",
  data() {
    return {
      tableData: [],
      page: {
        total: 0,
        pageSize: 4,
        pageNum: 1,
        pages: 0,
      },
    }
  },
  created() {
    this.getTableList()
  },

  methods: {
    //去支付
    toPay(orderNo) {
      this.$router.push({path:'/pay/'+orderNo})
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableList();
    },
    to(router){
      this.$router.push({
        path: router
      })
    },
    getTableList() {
      ordersApi.getMyOrder( this.page).then((res) => {
        console.log(res.data)
        this.tableData = res.data.records
        this.page.total = res.data.total
        this.page.pages = res.data.pages
        this.page.pageSize = res.data.size
      })
    },


  }

}
</script>

<style scoped>

</style>
